<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流程图自定义元素</title>
  <style>::-webkit-scrollbar {
      display: none;
  }

  html, body {
      overflow: hidden;
      margin: 0;
  }

  .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 15px;
      color: #4348ff;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
  </style>
</head>
<body>
<div id="mountNode" style="transform:scale(1,1)"
></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/dagre/0.8.4/dist/dagre.min.js"></script>
<script src="/jquery-3.6.0.min.js"></script>

<script>
    function getUrlQuery (queryName) {
        var reg = new RegExp('(^|&)' + queryName + '=([^&]*)(&|$)')
        var r = window.location.search.substr(1).match(reg)
        if (r != null) return r[2]
        return null
    }

    window.onload = function () {
        console.log('iframe页面的事件：window.onload')
        console.log(getUrlQuery('id'))
    }
    var _extends = Object.assign || function (target) {
        for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i]
            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key]
                }
            }
        }
        return target
    }

    /**
     * 本案例演示如何使用G6自定义流程图：
     * 1、如何使用G6绘制流程图；
     * 2、如何在贝塞尔曲线上面自定义icon；
     * 3、如何响应贝塞尔曲线上icon的点击事件。
     *
     * by 一之
     *
     */

    /**
     * node 特殊属性
     */
    var nodeExtraAttrs = {
        begin: {
            fill: '#1f8ee0'
        },
        end: {
            fill: '#C2E999'
        }
    }

    /**
     * 自定义节点
     */
    G6.registerNode('node', {
        drawShape: function drawShape (cfg, group) {
            console.log('cfg1111', cfg)
            group.addShape('text', {
                attrs: {
                    text: cfg.remark2,
                    x: -50,
                    y: +50,
                    fill: '#666'
                }
            })

            var rect = group.addShape('rect', {
                attrs: _extends({
                    x: -50,
                    y: -20,
                    width: 100,
                    height: 40,
                    radius: 4,
                    fill: cfg.over == '1' ? '#e5930d' : '#afafac',
                    fillOpacity: 1
                }, nodeExtraAttrs[cfg.type])
            })
            return rect
        },
        // 设置状态
        setState: function setState (name, value, item) {
            var group = item.getContainer()
            var shape = group.get('children')[0] // 顺序根据 draw 时确定

            if (name === 'selected') {
                if (value) {
                    shape.attr('fill', '#F6C277')
                } else {
                    shape.attr('fill', '#FFD591')
                }
            }
        },

        getAnchorPoints: function getAnchorPoints () {
            return [[0, 0.5], [1, 0.5]]
        }
    }, 'single-shape')

    // /**
    //  * 自定义 edge 中心关系节点
    //  */
    // G6.registerNode("statusNode", {
    //     drawShape: function drawShape(cfg, group) {
    //         var circle = group.addShape("circle", {
    //             attrs: {
    //                 x: 0,
    //                 y: 0,
    //                 r: 6,
    //                 fill: cfg.active ? "#AB83E4" : "#ccc"
    //             }
    //         });
    //         return circle;
    //     }
    // }, "single-shape");

    /**
     * 自定义带箭头的贝塞尔曲线 edge
     */
    G6.registerEdge('line-with-arrow', {
        itemType: 'edge',
        draw: function draw (cfg, group) {
            var startPoint = cfg.startPoint
            var endPoint = cfg.endPoint
            var centerPoint = {
                x: (startPoint.x + endPoint.x) / 2,
                y: (startPoint.y + endPoint.y) / 2
            }
            // 控制点坐标
            var controlPoint = {
                x: (startPoint.x + centerPoint.x) / 2,
                y: startPoint.y
            }

            console.log('cfg.target1111111111:' + (cfg.targetNode._cfg.model.over === '1'))
            // 为了更好的展示效果, 对称贝塞尔曲线需要连到箭头根部
            var path = group.addShape('path', {
                attrs: {
                    path: [['M', startPoint.x, startPoint.y], ['Q', controlPoint.x + 8, controlPoint.y, centerPoint.x, centerPoint.y], ['T', endPoint.x - 8, endPoint.y], ['L', endPoint.x, endPoint.y]],
                    stroke: cfg.targetNode._cfg.model.over === '1' ? 'rgba(33,83,243,0.41)' : '#5e5d5d',
                    lineWidth: 1.6,
                    endArrow: {
                        path: 'M 4,0 L -4,-4 L -4,4 Z',
                        d: 4
                    }
                }
            })

            // 如果是不对称的贝塞尔曲线，需要计算贝塞尔曲线上的中心点
            // 参考资料 https://stackoverflow.com/questions/54216448/how-to-find-a-middle-point-of-a-beizer-curve
            // 具体Util方法可以参考G：https://github.com/antvis/g/blob/4.x/packages/g-math/src/quadratic.ts

            // 在贝塞尔曲线中心点上添加圆形
            var source = cfg.source,
                target = cfg.target
            console.log('cfgText', cfg.sourceNode._cfg.model.remark)
            group.addShape('text', {
                attrs: {
                    text: cfg.sourceNode._cfg.model.remark,
                    x: centerPoint.x - 12,
                    y: centerPoint.y,
                    fill: '#424242'
                }
            })

            // group.addShape("circle", {
            //     attrs: {
            //         id: "statusNode" + source + "-" + target,
            //         r: 6,
            //         x: centerPoint.x,
            //         y: centerPoint.y,
            //         fill: cfg.active ? "#AB83E4" : "#ccc"
            //     }
            // });

            return path
        }
    })

    var graph = new G6.Graph({
        container: 'mountNode',
        width: 1800,
        height: 800,
        layout: {
            type: 'dagre',
            rankdir: 'LR'
        },
        modes: {
            // default: ['drag-canvas']
            default: ['drag-node', {
                type: 'tooltip',
                formatText: function formatText (model) {
                    if (model.description) {
                        var text = model.description
                        return text
                    }
                    return '暂无提示消息'
                },

                shouldUpdate: function shouldUpdate (e) {
                    return true
                }
            }, {
                type: 'edge-tooltip',
                formatText: function formatText (model) {
                    if (model.description) {
                        var text = model.description
                        return text
                    }
                    return '暂无提示消息'
                },

                shouldUpdate: function shouldUpdate (e) {
                    return true
                }
            }]
        },
        defaultNode: {
            shape: 'node',
            labelCfg: {
                style: {
                    fill: '#fff',
                    fontSize: 14
                }
            }
        },
        defaultEdge: {
            shape: 'line-with-arrow',
            style: {
                endArrow: true,
                lineWidth: 2,
                stroke: '#ccc'
            }
        }
    })

    $.ajax({
        // url: '/result.json',
        url: 'https://dxx.gylxpsy.com:10028/web/api/work/getWorkState',
        type: 'get',
        dataType: 'json',
        data: { 'id': getUrlQuery('id') },
        success: function (data, textStatus, jqxhr) {
            console.log('__成功__')
            console.log(textStatus)
            console.log(jqxhr)
            console.log('______',data)
            if (data.code == '0000') {
                graph.data(data.result.data)
                graph.render()
            }
        },
        error: function (jqxhr, textStatus, error) {
            alert('请求失败！')
        }
    })

</script>
</body>
</html>
